<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

// 假设你有一个方法来获取数据
const fetchData = async () => {
  // 这里模拟从后端获取数据
  return [
    { name: '河口镇', value: 100 },
    { name: '永平镇', value: 95 },
    { name: '石塘镇', value: 80 },
    { name: '鹅湖镇', value: 75 },
    { name: '湖坊镇', value: 65 },
    { name: '武夷山镇', value: 60 },
    { name: '汪二镇', value: 55 },
    { name: '葛仙山镇', value: 50 },
    { name: '陈坊乡', value: 45 },
    { name: '虹桥乡', value: 40 },
    { name: '新滩乡', value: 35 },
    { name: '稼轩乡', value: 30 },
    { name: '英将乡', value: 25 },
    { name: '紫溪乡', value: 20 },
    { name: '太源畲族乡', value: 15 },
    { name: '天柱山乡', value: 10 },
    { name: '篁碧畲族乡', value: 5 }
  ];
};

// 定义一个引用，用于引用图表容器的 DOM 元素
const chartRef = ref<HTMLElement | null>(null);

// 定义一个异步函数来渲染柱状图
const renderBarChart = async () => {
  // 检查 chartRef 是否已经挂载到 DOM 上
  if (chartRef.value) {
    // 初始化 ECharts 实例
    const chart = echarts.init(chartRef.value);

    // 获取数据
    const data = await fetchData();

    // 定义两种颜色用于交替渲染柱子
    const colors = ['#00bfff', '#ff6384'];

    // 定义图表的配置项
    const option = {
      // 提示框组件，用于显示数据详情
      tooltip: {
        trigger: 'axis', // 触发类型为坐标轴触发
        axisPointer: {
          type: 'shadow' // 使用阴影指示器
        }
      },
      // 网格布局配置
      grid: {
        left: '3%', // 距离左侧的距离
        right: '4%', // 距离右侧的距离
        bottom: '3%', // 距离底部的距离
        containLabel: true // 包含刻度标签
      },
      // X 轴配置
      xAxis: {
        type: 'value', // 类型为数值轴
        boundaryGap: [0, 0.01], // 坐标轴两边留白策略
        axisTick: {
          show: false // 不显示刻度线
        },
        axisLine: {
          show: false // 不显示坐标轴线
        }
      },
      // Y 轴配置
      yAxis: {
        type: 'category', // 类型为类目轴
        data: data.map(item => item.name), // 使用数据中的 name 字段作为类目轴数据
        axisTick: {
          show: false, // 不显示刻度线
          alignWithLabel: false // 刻度线是否与标签对齐
        }
      },
      // 系列列表
      series: [
        {
          name: '生态产品价值占比', // 系列名称
          type: 'bar', // 系列类型为柱状图
          data: data.map((item, index) => ({
            value: item.value, // 柱子的值
            itemStyle: {
              color: colors[index % colors.length] // 交替使用两种颜色
            }
          })),
          barWidth: '60%', // 柱子的宽度
          emphasis: {
            focus: 'series' // 高亮时聚焦整个系列
          }
        }
      ]
    };

    // 设置图表的配置项
    chart.setOption(option);
  }
}

// 在组件挂载后执行
onMounted(() => {
  // 延迟初始化图表，以确保 DOM 元素已经渲染完成
  setTimeout(() => {
    renderBarChart();
  }, 200);
});
</script>

<template>
  <!-- 定义图表容器，使用 ref 绑定到 chartRef 引用 -->
  <div ref="chartRef" style="width: 100%; height: 100%; border: 1px red solid"></div>
</template>

<style scoped>
/* 你可以根据需要添加样式 */
</style>
